import '@umijs/max';
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  message,
  Row,
  Select,
  Space,
  Spin,
  Upload,
} from 'antd';
import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import TextArea from 'antd/es/input/TextArea';
import { genChartByAiUsingPost } from '@/services/api/chartController';
import EChartsReact from 'echarts-for-react';

/**
 * 用户管理页面
 *
 * @constructor
 */
const ChartPage: React.FC = () => {
  const { Option } = Select;

  // 是否显示加载
  const [loading, setLoading] = useState<boolean>(false);

  // ai生成的数据
  const [chart, setChart] = useState<API.BiResponse>({});
  // 图表 option json
  const [option, setOption] = useState<any>(undefined);

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  const onFinish = async (values: any) => {
    if (loading) {
      return;
    }
    setLoading(true);

    const params = {
      ...values,
      file: undefined,
    };

    try {
      const res = (await genChartByAiUsingPost(params, {}, values.file.file.originFileObj))
        .data as API.BiResponse;

      if (res) {
        const chartOption = JSON.parse(res.genChart ?? '');
        if (!chartOption) {
          throw new Error('图表代码解析失败');
        }
        setChart(res);
        setOption(chartOption);
        message.success('分析成功');
      } else {
        message.error('分析失败');
      }
    } catch (e: any) {
      message.error('分析失败 ' + e.message);
    }
    setLoading(false);
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title={'智能分析'}>
            <Form
              name="add-chart"
              labelAlign="left"
              {...formItemLayout}
              onFinish={onFinish}
              initialValues={{}}
              style={{ maxWidth: 600 }}
            >
              <Form.Item
                label="图表名称"
                name="name"
                rules={[{ required: true, message: '请输入图表名称' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="分析需求"
                name="goal"
                rules={[{ required: true, message: '请输入分析需求' }]}
              >
                <TextArea placeholder="请输入你的分析需求，比如分析网站用户的增长情况" />
              </Form.Item>
              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
                rules={[{ required: true, message: '请选择图表类型!' }]}
              >
                <Select placeholder="请选择图表类型">
                  <Option value="line">折线图</Option>
                  <Option value="bar">柱状图</Option>
                  <Option value="pie">饼图</Option>
                  <Option value="radar">雷达图</Option>
                  <Option value="scatter">散点图</Option>
                  <Option value="histogram">直方图</Option>
                  <Option value="box">箱线图</Option>
                  <Option value="area">面积图</Option>
                  <Option value="bubble">气泡图</Option>
                  <Option value="heatmap">热力图</Option>
                </Select>
              </Form.Item>

              <Form.Item
                name="file"
                label="Excel数据"
                rules={[{ required: true, message: '请上传图表数据!' }]}
              >
                <Upload name="excel">
                  <Button icon={<UploadOutlined />}>上传 CSV 文件</Button>
                </Upload>
              </Form.Item>
              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Space>
                  <Button loading={loading} type="primary" htmlType="submit">
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title={'分析结论'}>
            {chart?.genResult ?? <div>请先在左侧点击提交</div>}
            <Spin spinning={loading} />
          </Card>
          <Divider />
          <Card title={'可视化图表'}>
            {option ? <EChartsReact option={option} /> : <div>请先在左侧点击提交</div> }
            <Spin spinning={loading} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default ChartPage;
